<template>
  <div class="container">
    <router-view/>
    <van-tabbar class="TouTiaoTabBar" route active-color="#22cc9f" inactive-color="#999999">
        <van-tabbar-item replace to="/layout/home" >
            <span>首页</span>
            <template #icon>
              <i class="iconfont toutiao-shouye"></i>
            </template>
        </van-tabbar-item>
        <van-tabbar-item replace to="/layout/QA">
            <span>问答</span>
            <template #icon>
              <i class="iconfont toutiao-wenda"></i>
            </template>
        </van-tabbar-item>
        <van-tabbar-item replace to="/layout/video">
            <span>视频</span>
            <template #icon>
              <i class="iconfont toutiao-shipin"></i>
            </template>
        </van-tabbar-item>
        <van-tabbar-item replace to="/layout/my">
            <span>{{ $store.state.user?'我的':'未登录' }}</span>
            <template #icon>
              <i class="iconfont toutiao-wode"></i>
            </template>
        </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
export default {
data () {
    return {
        TabBarActive: 0,
        isLogin: false,
    }
},
}
</script>

<style scoped lang="less" >
.TouTiaoTabBar{
  border-top: 1px solid #e6e6e6;
  overflow: hidden;
  .van-tabbar-item{
    font-size: 23px;
  }
  .iconfont{
    font-size: 28px;
  }
  .van-tabbar-item--active{
    transform: scale(1.2);
    transition: all .2s;
    background-color: rgba(255, 192, 203, 0);
  }
}
</style>